<div class="container">

  <div class="text-center">
    <a rel="nofollow" href="/auth/google_oauth2?origin=<%= params[:return_to] || request.original_url %>" id="connect-google" aria-label="Sign Up with Google">
      <span class="btn btn-outline-light" style="margin-right:2px;background-color: #d34836;">
        <i class="fa fa-google fa-fw" style="font-size:20px;color:white;"></i>
      </span>
    </a>
    <a rel="nofollow" href="/auth/github?origin=<%= params[:return_to] || request.original_url %>" id="connect-github" aria-label="Sign Up with Github">
      <span class="btn btn-default" style="margin-left:2px;background-color: #333;">
        <i class="fa fa-github fa-fw" style="font-size:20px;color:white;"></i>
      </span>
    </a>
    <a rel="nofollow" href="/auth/twitter?origin=<%= params[:return_to] || request.original_url %>" id="connect-twitter" aria-label="Sign Up with Twitter">
      <span class="btn btn-outline-light" style="margin-left:2px;background-color: #1da1f2;">
        <i class="fa fa-twitter fa-fw" style="font-size:20px;color:white;margin-left:2px;"></i>
      </span>
    </a>
    <a rel="nofollow" href="/auth/facebook?origin=<%= params[:return_to] || request.original_url %>" id="connect-facebook" aria-label="Sign Up with Facebook">
      <span class="btn btn-outline-light" style="margin-left:2px;background-color: #3b5998">
        <i class="fa fa-facebook fa-fw" style="font-size:20px;color:white;"></i>
      </span>
    </a>
  </div>

  <div class='hr-or'></div>

</div>
<style>
  div.hr-or {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
    text-align: center;
    height: 0px;
    line-height: 0px;
    font-family:"Junction Light", lucida grande,lucida sans console,sans-serif;
    font-weight:normal;
  }

  div.hr-or:before {
    content: 'OR';
    padding:5px;
    background-color: #fff;
  }

  a:hover {
    text-decoration :none;
  }
</style>
